import { Breadcrumb, Divider, Button, Form, DatePicker, Input, Table, Select, Checkbox, Space, Radio, Modal } from 'antd';
import './index.scss'
import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
const { Option } = Select;
const { RangePicker } = DatePicker;

const Newfullreduce = () => {
    //   返回 路由跳转
    const navigate = useNavigate()
    // 多选框
    const [value, setValue] = useState(1);
    // 对话框表格
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    // 满减信息input框
    const { Search } = Input;
    const [componentSize, setComponentSize] = useState('default');
    // Form表单change事件
    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
    };
    //  获取input框的值 
    const [form] = Form.useForm()
     // 提交
    const formsumbit = () => {
        const FormData = form.getFieldValue()
        console.log(FormData);
    }
    // 搜索
    const onSearch = (value) => console.log(value);
    // 选择商品Modal对话框
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 选择商品Modal函数
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 表头
    const columns = [
        {
            title: '商品信息',
            dataIndex: 'name',
        },
        {
            title: '价格(元)',
            dataIndex: 'age',
        },
        {
            title: '库存',
            dataIndex: 'address',
        },
        {
            title: '销量',
            dataIndex: 'action',
        },
    ];
    const data = [];
    // 完成查询或重置
    const oncheckFinish = (values) => {
        console.log(values);
    };
    for (let i = 0; i < 10; i++) {
        data.push({
            key: i,
            name: `小张 ${i}`,
            age: 32,
            address: `London, Park Lane no. ${i}`,
            action: 1,
        });
    }
    // 时间戳宽度
    const formItemLayout = {
        labelCol: {
            xs: {
                span: 10,

            },
            sm: {
                span: 24,
            },
        },
        wrapperCol: {
            xs: {
                span: 5,
            },
            sm: {
                span: 24,
            },
        },
    };
    // 获取时间
    const changeData = (data, stringData) => {
        console.log(stringData);
    }

    // 

    const back = () => {
        navigate('/home/market/full-reduct')
    }
    // 对话框内表格
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        // selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    // 满减信息1
    const onChange = (e) => {
        console.log(`checked = ${e.target.checked}`);
    };
    // Form表单的宽度设置
    const layout = {
        labelCol: {
            span: 12,
        },
        wrapperCol: {
            span: 16,
        },
    };
    // 使用状态
    const onGenderChange = (value) => {
        switch (value) {
            case 'male':
                this.formRef.current.setFieldsValue({
                    note: 'Hi, man!',
                });
                return;

            case 'female':
                this.formRef.current.setFieldsValue({
                    note: 'Hi, lady!',
                });
                return;

            case 'other':
                this.formRef.current.setFieldsValue({
                    note: 'Hi there!',
                });
        }
    }
    // 时间戳
    const onFinish = (fieldsValue) => {
        const rangeTimeValue = fieldsValue['range-time-picker'];
        const values = {
            ...fieldsValue,
            'range-time-picker': [
                rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
                rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
            ],

        };
        console.log('Received values of form: ', values);
    }
    return <div className='header5'>
        <div className='head-top' >
            <div>
                {/* 面包屑满减 */}
                <div className='sale'>
                    <Breadcrumb>
                        <Breadcrumb.Item>营销</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            满赠
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            满赠满x元满赠活动
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className='header-left'>新建满赠活动</div>
            </div>
            <Divider plain></Divider>
            {/* 状态 */}

        </div>
        {/* 表格 */}
        <div className='table-cont'>
            <h3 style={{ padding: '20px' }}>基础信息</h3>
            <div className='table-btn'>
                <div className='table-new'>
                    <div className='activity'>
                        <Form
                            // 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
                            form={form}
                            className='form-table'
                            labelCol={{
                                span: 3,
                            }}
                            wrapperCol={{
                                span: 30,
                            }}
                            layout="horizontal"
                            onValuesChange={onFormLayoutChange}
                        >
                            <Form.Item label="活动名称">
                                <Input placeholder='请输入' />
                            </Form.Item>
                            {/* 时间戳 */}
                            <Form.Item
                                label="活动日期"
                                style={{
                                    marginBottom: 0,

                                }}
                            >
                                <Form.Item
                                    validateStatus="error"
                                    // help="请输入开始日期"
                                    // {...formItemLayout}
                                    style={{
                                        display: 'inline-block',
                                        width: 'calc(50% - 12px)',
                                    }}
                                >
                                    <DatePicker onChange={changeData} />
                                </Form.Item>
                                <span
                                    style={{
                                        display: 'inline-block',
                                        width: '24px',
                                        lineHeight: '32px',
                                        textAlign: 'center',
                                    }}
                                >
                                    至
                                </span>
                                <Form.Item
                                    style={{
                                        display: 'inline-block',
                                        width: 'calc(50% - 12px)',
                                    }}
                                >
                                    <DatePicker onChange={changeData} />
                                </Form.Item>
                            </Form.Item>
                            <div style={{ display: 'flex' }}>

                                满减信息: <Checkbox onChange={onChange} >一级优惠:</Checkbox>
                                <Form.Item name='full' style={{ display: 'inline-block' }}>
                                    消费满 <Input suffix="元" placeholder='请输入' style={{ margin: ' 0 20px' }} />
                                </Form.Item>
                                <Form.Item name='jian' style={{ display: 'inline-block' }} >
                                    立减<Input suffix="元" placeholder='请输入' style={{ margin: ' 0 20px' }} />
                                </Form.Item>
                                <a >删除</a>

                            </div>
                            {/* <a>新增下一个优惠等级</a> */}
                            <Form.Item
                                label="优惠叠加"
                                style={{
                                    padding: "0 0 10px "
                                }}
                            >
                                <Radio.Group onChange={onChange} value={value} style={{ margin: '10px 0' }}>
                                    <Space direction="vertical">
                                        <Radio value={1}>不可叠加</Radio>
                                        <Radio value={2}>可叠加其他类型的优惠</Radio>
                                    </Space>

                                </Radio.Group>
                            </Form.Item>
                            <Form.Item
                                label="适用商品"
                                style={{
                                    margin: "0 0 10px  "
                                }}
                            >
                                <Radio.Group onChange={onChange} value={value}>
                                    <Space direction="vertical">
                                        <Radio value={1}>全部商品</Radio>
                                        <Radio value={2}>部分商品</Radio>
                                    </Space>
                                </Radio.Group>

                                <a onClick={showModal}>选择商品</a>

                                <Modal title="选择商品" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消" width={800} >
                                    {/* 全部分类 input框 */}
                                    <div className='state' style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <div>
                                            <Form {...layout} name="control-ref" onFinish={oncheckFinish} layout='inline' labelCol={{ span: 10 }
                                            }>
                                                <Form.Item
                                                    name="gender"
                                                    label="全部分类"
                                                >
                                                    <Select
                                                        placeholder="请选择商品分类"
                                                        onChange={onGenderChange}
                                                        allowClear
                                                    >
                                                        <Option value="male">全部</Option>
                                                        <Option value="female">办公用品</Option>
                                                        <Option value="other">文具用品</Option>
                                                        <Option value="other">周边商品</Option>
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name="note"
                                                    label="名称"
                                                >
                                                    <Input placeholder="请输入" />
                                                </Form.Item>

                                            </Form></div>

                                        <div className='set' style={{ display: 'flex' }}>
                                            <div className='check' style={{ padding: '0 10px' }}>
                                                <Button type="primary">查询</Button>
                                            </div>
                                            <Button>重置</Button>
                                        </div>

                                    </div>
                                    <Divider />
                                    {/* 表格 */}
                                    <div className='table-cont'>


                                        <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{ pageSize: 5 }} />
                                    </div>
                                </Modal>

                            </Form.Item>
                            <div style={{ margin: '20px 50px ' }}>
                                <Button type="primary" htmlType="submit" onClick={formsumbit} style={{ margin: '0 10px', }}>
                                    提交
                                </Button>
                                <Button onClick={back}>返回</Button>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    </div>
}


export default Newfullreduce